<script setup>

import HeadComponents from "@/components/headComponents.vue";
import { ref } from "vue";

// 表单数据模型
const userName = ref('');
const contactInfo = ref('');
const feedbackText = ref('');

// 提交处理函数
const submitFeedback = (event) => {
  event.preventDefault(); // 阻止默认提交行为

  // 简单校验
  if (!userName.value.trim() || !feedbackText.value.trim()) {
    alert('请填写必填项');
    return;
  }

  console.log('提交数据:', {
    userName: userName.value,
    contactInfo: contactInfo.value,
    feedbackText: feedbackText.value
  });

  // 提示用户
  alert('感谢您的反馈！');

  // 可选：清空表单
  userName.value = '';
  contactInfo.value = '';
  feedbackText.value = '';
};
</script>

<template>
  <head-components></head-components>
  <div class="container">
    <div class="card">
      <h3>用户反馈</h3>
      <form id="feedbackForm" @submit="submitFeedback">
        <!-- 姓名 -->
        <div class="form-group">
          <label class="form-label">您的称呼</label>
          <span class="small-text">ꓠꓴ ꓟꓲ</span>
          <input type="text" class="form-input" id="userName" v-model="userName"
                 placeholder="请输入您的姓名或昵称" required />
        </div>

        <!-- 联系方式 -->
        <div class="form-group">
          <label class="form-label">联系方式</label>
          <span class="small-text">ꓬꓲꓸ ꓦꓹ ꓙꓳꓽ ꓖꓴ ꓐꓯ ꓠꓬ ꓕꓲ ꓗꓪ ꓠꓬꓲꓸ ꓢꓲꓸ ꓓꓳꓽ ꓬꓲꓸ</span>
          <input type="text" class="form-input" id="contactInfo" v-model="contactInfo"
                 placeholder="请输入邮箱或手机号（可选）" />
        </div>

        <!-- 反馈内容 -->
        <div class="form-group">
          <label class="form-label">反馈内容</label>
          <span class="small-text">ꓬꓲꓸ ꓦꓹ ꓙꓳꓽ ꓖꓴ ꓐꓯ ꓠꓬ ꓕꓲ ꓗꓪ ꓠꓬꓲꓸ ꓢꓲꓸ ꓓꓳꓽ ꓬꓲꓸ</span>
          <textarea class="form-input" id="feedbackText" v-model="feedbackText"
                    placeholder="请详细描述您的问题或建议..."
                    rows="4" required></textarea>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="btn btn-primary">提交反馈</button>
      </form>
    </div>
  </div>
</template>


<style >
@import "../assets/base.css";
.container {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  position: relative;
}
</style>